<template>
  <div class="player-history">
    <!-- 比赛记录标签页 -->
    <el-tabs v-model="activeTab" class="history-tabs">
      <el-tab-pane label="比赛记录" name="matches">
        <div class="action-bar">
          <el-button type="primary" @click="addMatchRecord">
            添加比赛记录
          </el-button>
        </div>

        <el-table :data="matchRecords" stripe>
          <el-table-column prop="date" label="比赛日期" width="120" />
          <el-table-column prop="competition" label="赛事" width="150" />
          <el-table-column prop="opponent" label="对手" width="150" />
          <el-table-column prop="result" label="比分" width="100" />
          <el-table-column prop="goals" label="进球" width="80" />
          <el-table-column prop="assists" label="助攻" width="80" />
          <el-table-column
            prop="playingTime"
            label="出场时间(分钟)"
            width="120"
          />
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button-group>
                <el-button size="small" @click="editMatch(scope.row)">
                  编辑
                </el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="deleteMatch(scope.row)"
                >
                  删除
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <!-- 转会历史标签页 -->
      <el-tab-pane label="转会历史" name="transfers">
        <div class="action-bar">
          <el-button type="primary" @click="addTransferRecord">
            添加转会记录
          </el-button>
        </div>

        <el-timeline>
          <el-timeline-item
            v-for="transfer in transferHistory"
            :key="transfer.id"
            :timestamp="transfer.date"
            :type="transfer.type"
          >
            <el-card>
              <h4>{{ transfer.fromClub }} → {{ transfer.toClub }}</h4>
              <p>转会类型：{{ transfer.transferType }}</p>
              <p>转会费：{{ transfer.fee }}</p>
              <p>合同期限：{{ transfer.contractDuration }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>

    <!-- 添加比赛记录对话框 -->
    <el-dialog
      v-model="matchDialogVisible"
      :title="isEdit ? '编辑比赛记录' : '添加比赛记录'"
      width="50%"
    >
      <el-form :model="matchForm" label-width="120px">
        <el-form-item label="比赛日期">
          <el-date-picker
            v-model="matchForm.date"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="赛事">
          <el-input v-model="matchForm.competition" />
        </el-form-item>
        <el-form-item label="对手">
          <el-input v-model="matchForm.opponent" />
        </el-form-item>
        <el-form-item label="比分">
          <el-input v-model="matchForm.result" />
        </el-form-item>
        <el-form-item label="进球">
          <el-input-number v-model="matchForm.goals" :min="0" />
        </el-form-item>
        <el-form-item label="助攻">
          <el-input-number v-model="matchForm.assists" :min="0" />
        </el-form-item>
        <el-form-item label="出场时间">
          <el-input-number
            v-model="matchForm.playingTime"
            :min="0"
            :max="120"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="matchDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveMatchRecord"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const activeTab = ref("matches");
const matchDialogVisible = ref(false);
const isEdit = ref(false);

// 比赛记录数据
const matchRecords = ref([
  {
    id: 1,
    date: "2024-03-10",
    competition: "中超联赛",
    opponent: "北京国安",
    result: "2-1",
    goals: 1,
    assists: 0,
    playingTime: 90,
  },
]);

// 转会历史数据
const transferHistory = ref([
  {
    id: 1,
    date: "2023-07-01",
    fromClub: "广州队",
    toClub: "上海海港",
    transferType: "永久转会",
    fee: "￥1000万",
    contractDuration: "2023-2026",
    type: "primary",
  },
]);

// 比赛记录表单
const matchForm = ref({
  date: "",
  competition: "",
  opponent: "",
  result: "",
  goals: 0,
  assists: 0,
  playingTime: 90,
});

// 添加比赛记录
const addMatchRecord = () => {
  isEdit.value = false;
  matchForm.value = {
    date: "",
    competition: "",
    opponent: "",
    result: "",
    goals: 0,
    assists: 0,
    playingTime: 90,
  };
  matchDialogVisible.value = true;
};

// 编辑比赛记录
const editMatch = (row) => {
  isEdit.value = true;
  matchForm.value = { ...row };
  matchDialogVisible.value = true;
};

// 删除比赛记录
const deleteMatch = (row) => {
  ElMessageBox.confirm("确定要删除这条比赛记录吗？", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    matchRecords.value = matchRecords.value.filter(
      (item) => item.id !== row.id
    );
    ElMessage.success("删除成功");
  });
};

// 保存比赛记录
const saveMatchRecord = () => {
  if (isEdit.value) {
    // 更新现有记录
    const index = matchRecords.value.findIndex(
      (item) => item.id === matchForm.value.id
    );
    if (index !== -1) {
      matchRecords.value[index] = { ...matchForm.value };
    }
  } else {
    // 添加新记录
    matchRecords.value.push({
      id: Date.now(), // 简单的ID生成
      ...matchForm.value,
    });
  }
  matchDialogVisible.value = false;
  ElMessage.success(isEdit.value ? "更新成功" : "添加成功");
};

// 添加转会记录
const addTransferRecord = () => {
  // 这里可以添加转会记录的表单逻辑
  ElMessage.info("转会记录功能开发中...");
};
</script>

<style scoped>
.player-history {
  padding: 20px;
}

.action-bar {
  margin-bottom: 20px;
}

.history-tabs {
  margin-top: 20px;
}

.el-timeline {
  margin-top: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>